<!--
 * @Author: 周凯
 * @Date: 2020-11-04 20:45:09
 * @LastEditTime: 2020-11-04 21:48:37
--> 
<template>
<div id="app">
  <el-button @click="screening()">筛选</el-button>
  <el-table :data="tableData" style="width: 100%">
    <custom-filter-header :status="status" v-for="(item, index) in customHeaderList" @change="change" :key="index" :list="item.filterList" :title="item.title" :prop="item.props" />
  </el-table>

  {{data}}
</div>
</template>

<script>
import CustomFilterHeader from './components/CustomFilterHeader';
export default {
  components: {
    CustomFilterHeader
  },
  data() {
    return {
      data: '',
      customHeaderList: [{
          title: '地址',
          props: 'address',
          filterList: [{
            label: '大于',
            value: '>',
          }, {
            label: '小于',
            value: '<',
          }]
        },
        {
          title: '姓名',
          props: 'name',
          filterList: [{
              label: '全部',
              value: "全部"
            },
            {
              label: '王',
              value: "王"
            }, {
              label: '小明',
              value: '小明',
            }
          ]
        },
        {
          title: '日期',
          props: 'date'
        },

      ],
      status: false,
      tableData: [{
        date: '2016-05-02',
        name: '王',
        address: '上海市普陀区金沙江路 1518 弄'
      }, {
        date: '2016-05-04',
        name: '小虎',
        address: '上海市普陀区金沙江路 1517 弄'
      }, {
        date: '2016-05-01',
        name: '小明',
        address: '上海市普陀区金沙江路 1519 弄'
      }, {
        date: '2016-05-03',
        name: '丽丽',
        address: '上海市普陀区金沙江路 1516 弄'
      }],
      sourceData: []
    }
  },
  mounted() {
    this.sourceData = JSON.parse(JSON.stringify(this.tableData));
  },
  methods: {
    screening() {
      this.status = !this.status;
    },
    change(val) {
      const data = val.split('-');
      this.data = `key: ${data[0]} 搜索值为: ${data[1]}`
      if (data[0] === 'name') {
        if (data[1] === '全部') {
          this.tableData = JSON.parse(JSON.stringify(this.sourceData));
        } else {
          this.tableData = this.sourceData.filter((item) => item.name === data[1])
        }
      }
    }
  },
}
</script>

<style scoped>
#id {
  padding: 50px;
}
</style>
